
<template>

  <div id="main">

    <div id="step" style="width: 1000px;">
      活动流程：<br>
      <el-steps :active="6" align-center>
        <el-step title="活动申报" />
        <el-step title="领导审核" />
        <el-step title="开放报名" />
        <el-step title="审核录取" />
        <el-step title="进行活动" />
        <el-step title="记录导出" />
      </el-steps>
    </div>

    <div id="form">

      <div id="img" style="text-align: center;">
        <img src="../../assets/images/bcu.jpg">
      </div>

      <h2 style="text-align: center; margin-top: 30px; margin-bottom: 30px;">北京城市学院校园活动申报表</h2>

      <el-form :model="act" :rules="rules">

        <el-form-item label="活动名称" :label-width="formLabelWidth" prop="actTitle">
          <el-input v-model="act.actTitle" autocomplete="off" maxlength="20" show-word-limit :readonly="readonly" />
        </el-form-item>

        <el-form-item label="标题图片" :label-width="formLabelWidth" prop="actTitleImg">
          <!-- <el-input v-model="act.actTitleImg" autocomplete="off" :readonly="readonly"></el-input> -->
          <el-upload
            class="avatar-uploader"
            :action="url"
            :show-file-list="false"
            :on-success="handleTitleSuccess"
            :file-list="titleFileList"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="titleImageUrl" :src="titleImageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

        <el-form-item label="轮播图" :label-width="formLabelWidth" prop="actContentImg">
          <!-- <el-input v-model="act.actContentImg" autocomplete="off" :readonly="readonly"></el-input> -->
          <el-upload
            :action="url"
            list-type="picture-card"
            :on-success="handleContentSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="contentFileList"
          >

            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="contentVisible">
            <img width="100%" :src="contentImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="主办方" :label-width="formLabelWidth" prop="actHost">
          <el-input v-model="act.actHost" autocomplete="off" :readonly="readonly" placeholder="例: 北京城市学院信息学部 " width="100px" />

        </el-form-item>

        <el-form-item label="报名截止日期" :label-width="formLabelWidth" prop="actJoinDeadtime">
          <el-date-picker
            v-model="act.actJoinDeadtime"
            type="date"
            placeholder="选择日期"
          />
          <!-- <el-input v-model="act.actJoinDeadtime" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动开始时间" :label-width="formLabelWidth" prop="actStartTime">
          <el-date-picker
            v-model="act.actStartTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
          <!-- <el-input v-model="act.actStartTime" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动结束时间" :label-width="formLabelWidth" prop="actStopTime">
          <el-date-picker
            v-model="act.actStopTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
          <!-- <el-input v-model="act.actStopTime" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动最大人数" :label-width="formLabelWidth" prop="actMemberMax">
          <el-input v-model="act.actMemberMax" autocomplete="off" :readonly="readonly" prefix-icon="el-icon-user-solid" placeholder="请输入活动最大人数" type="number" />
        </el-form-item>

        <el-form-item label="报名审核方式" :label-width="formLabelWidth" prop="actMemberWay">
          <el-select v-model="act.actMemberWay" placeholder="请选择报名审核方式">
            <el-option
              label="无需审核"
              value="2"
            />
            <el-option
              label="手动审核"
              value="1"
            />

          </el-select>
          <!-- <el-input v-model="act.actMemberWay" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动地点" :label-width="formLabelWidth" prop="actAddress">
          <el-input v-model="act.actAddress" autocomplete="off" :readonly="readonly" placeholder="请详细描述活动地点  例如:北京城市学院顺义校区3号实训楼" @blur="getCoordinate" />
        </el-form-item>

        <el-form-item label="活动类别" :label-width="formLabelWidth" prop="actType">
          <el-select v-model="act.actType" placeholder="请选择报名审核方式">
            <el-option
              label="学部级活动"
              value="1"
            />
            <el-option
              label="校级活动"
              value="2"
            />
          </el-select>
          <!-- <el-input v-model="act.actType" autocomplete="off" :readonly="readonly"></el-input> -->
        </el-form-item>

        <el-form-item label="活动描述" :label-width="formLabelWidth" prop="actDesc">
          <el-input v-model="act.actDesc" rows="5" autocomplete="off" :readonly="readonly" type="textarea" placeholder="请详细描述活动内容,50字左右" resize="none" />
        </el-form-item>

        <!-- <el-form-item label="当前状态" :label-width="formLabelWidth" prop='actStatus'>
              <el-input v-model="act.actStatus" autocomplete="off" :readonly="readonly"></el-input>
            </el-form-item> -->

      </el-form>
      <div id="buttons">
        <!-- <el-button @click="dialogFormVisible = false">关 闭</el-button> -->
        <el-button v-show="!readonly" type="primary" :loading="loading" @click="handleSubmit">送 审</el-button>
      </div>

    </div>

    <div id="empty" style="margin-bottom: 30px;" />
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getUserInfoByToken } from '../../api/userInfo.js'
import { getCoordinateByAddress, createActivity } from '../../api/act.js'
export default {
  name: '',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      readonly: false,
      url: process.env.VUE_APP_BASE_API + 'file/',
      loading: false,
      dialogFormVisible: true,
      formLabelWidth: '100px',
      title: '北京城市学院校园活动申报单',
      contentImageUrl: '',
      titleImageUrl: '',
      contentVisible: false,
      titleFileList: [],
      contentFileList: [],
      userInfo: {},
      act: {
        actId: '',
        actPartId: '',
        actUserId: '',
        actTitleImg: '',
        actTitle: '信息学部校友会',
        actContentImg: '',
        actHost: '北京城市学院信息学部',
        actJoinDeadtime: '',
        actStartTime: '',
        actStopTime: '',
        actMemberMax: '100',
        actMemberWay: '2',
        actDesc: '描述描述',
        actPrincipalName: '',
        actPrincipalPhone: '',
        actPrincipalEmail: '',
        actAddress: '北京城市学院顺义校区3号实训楼',
        actCoordinate: '',
        actType: '1',
        actStatus: ''
      },
      rules: {}
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    showInfo(userId) {
      this.title = '活动详情'
      this.readonly = true
      this.fetchData(userId)
    },
    editInfo(userId) {
      this.title = '编辑活动信息'
      this.readonly = false
      this.fetchData(userId)
    },
    fetchData(userId) {
      this.loading = true
      getUserInfoById(userId).then((data) => {
        this.user = data.obj
        this.loading = false
        this.dialogFormVisible = true
      })
    },
    handleRemove(file, fileList) {
      this.contentFileList = fileList
      const list = fileList.map((item) => { return item.response.obj })
      this.act.actContentImg = list.join('')
      console.log(this.act.actContentImg)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleTitleSuccess(res, file) {
      console.log(res)
      if (res.result === true) {
        this.$notify({
          title: '成功',
          message: '图片上传成功',
          type: 'success'
        })
        this.act.actTitleImg = res.obj
        this.titleImageUrl = URL.createObjectURL(file.raw)
      } else {
        this.$notify({
          title: '成功',
          message: '图片上传失败',
          type: 'error'
        })
      }
    },
    handleContentSuccess(res, file, fileList) {
      console.log(res)
      if (res.result === true) {
        this.$notify({
          title: '成功',
          message: '图片上传成功',
          type: 'success'
        })
        this.act.actContentImg += res.obj
        this.contentFileList = fileList
      } else {
        this.$notify({
          title: '成功',
          message: '图片上传失败',
          type: 'error'
        })
      }
    },
    handleSubmit() {
      console.log(1111)
      // this.act.validate().then(()=>{
      getUserInfoByToken().then((resp) => {
        this.userInfo = resp.obj
        this.$confirm(`请确认申报人信息是否正确\n申报人姓名：${this.userInfo.userName}\n申报人电话：${this.userInfo.userPhone}\n申报人邮箱：${this.userInfo.userEmail}\n`).then(() => {
          this.act.actPrincipalName = this.userInfo.userName
          this.act.actPrincipalPhone = this.userInfo.userPhone
          this.act.actPrincipalEmail = this.userInfo.userEmail
          console.log('活动提交')
          console.log(this.act)
          this.loading = true
          createActivity(this.act).then(() => {
            this.act = {}
            this.contentImageUrl = ''
            this.titleImageUrl = ''
            this.titleFileList = []
            this.contentFileList = []
            this.loading = false
            this.dialogVisible = false
            // this.$message('活动送审成功，审核通过后，您将收到邮件通知')
            this.$alert('活动送审成功，审核通过后，您将收到邮件通知', '送审成功', {
              confirmButtonText: '确定'
            }
            )
          }).catch((resp) => {
            this.loading = false
            this.$notify({
              title: '系统繁忙',
              message: resp.msg,
              type: 'error'
            })
          })
        })
      })
      // })
    },
    beforeAvatarUpload() {},
    getCoordinate() {
      if (this.act.actAddress.trim().length > 0) {
        getCoordinateByAddress(this.act.actAddress).then((resp) => {
          console.log(resp)
          this.act.actCoordinate = resp.obj
          this.$notify({
            title: '成功',
            message: '经纬度信息获取成功',
            type: 'success'
          })
        }).catch((resp) => {
          console.log(resp)
          this.act.actAddress = ''
          this.$notify({
            title: '错误',
            message: resp.message,
            type: 'error'
          })
        })
      }
    }

  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
  #main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 0 auto;

    width: 900px;

  }
  #buttons{
    text-align: center;
  }

  #step{
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0 auto;
  }

  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
